<script setup>
import lottie from 'lottie-web';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const animation = ref(null);
const lottie404 = ref(null)

const toHome = (() => {
  router.push({ path: '/' })
})

onMounted(() => {
  animation.value = lottie.loadAnimation({
    container: lottie404.value,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://kanekikeh.online/A/lotties/404.json',
    fps: 60
  });
})
</script>

<template>
  <div ref="lottie404" class="lottie"></div>

  <div class="btn" @click="toHome">GO HOME</div>
</template>


<style scoped>
* {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;

  margin-top: 5vh;
}

.lottie {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;
  height: 80%;

}

.btn {
  position: absolute;
  z-index: 999;
  top: 75%;
  left: 51.3%;
  transform: translate(-50%, -75%);
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  width: 180px;
  height: 50px;
  padding: 10px 15px 10px 15px;
  background-color: rgba(65, 166, 243, 1);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
}
</style>